import React from 'react';
import { Card, Descriptions, Tag, Divider, Timeline, Button, Space, Breadcrumb } from 'antd';
import { HomeOutlined, ClockCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
import { Link, useParams, useNavigate } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './ReformDetail.module.less';

const ReformDetail: React.FC = () => {
  const { id } = useParams();
  const navigate = useNavigate();

  // 模拟数据
  const reform = {
    id,
    projectName: '示范区档案管理项目',
    projectCode: 'PRJ001',
    title: '档案系统功能优化',
    type: '系统问题',
    status: 'pending',
    priority: 'high',
    createTime: '2024-03-16 10:30',
    deadline: '2024-03-20',
    description: '系统性能需要进一步优化，具体表现在...',
    assignee: '张三',
    history: [
      {
        time: '2024-03-16 10:30',
        status: 'created',
        operator: '系统',
        content: '问题已创建'
      },
      {
        time: '2024-03-16 14:20',
        status: 'assigned',
        operator: '李四',
        content: '已分配处理人员'
      }
    ]
  };

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: <Link to="/formal-acceptance/reform">整改复查</Link>,
          },
          {
            title: '问题详情',
          }
        ]} />
      </div>

      <Card className={styles.detailCard}>
        <div className={styles.header}>
          <h2>{reform.title}</h2>
          <Space>
            <Tag color="blue">{reform.type}</Tag>
            <Tag color={reform.status === 'pending' ? 'orange' : 'success'}>
              {reform.status === 'pending' ? '待复查' : '已复查'}
            </Tag>
            <Tag color={reform.priority === 'high' ? 'red' : 'green'}>
              {reform.priority === 'high' ? '高优先级' : '普通优先级'}
            </Tag>
          </Space>
        </div>

        <Divider />

        <Descriptions column={2}>
          <Descriptions.Item label="所属项目">{reform.projectName}</Descriptions.Item>
          <Descriptions.Item label="项目编号">{reform.projectCode}</Descriptions.Item>
          <Descriptions.Item label="创建时间">{reform.createTime}</Descriptions.Item>
          <Descriptions.Item label="截止时间">{reform.deadline}</Descriptions.Item>
          <Descriptions.Item label="处理人">{reform.assignee}</Descriptions.Item>
        </Descriptions>

        <Divider orientation="left">问题描述</Divider>
        <div className={styles.description}>{reform.description}</div>

        <Divider orientation="left">处理记录</Divider>
        <Timeline items={reform.history.map(item => ({
          color: item.status === 'created' ? 'blue' : 'green',
          dot: item.status === 'created' ? <ClockCircleOutlined /> : <CheckCircleOutlined />,
          children: (
            <div className={styles.timelineItem}>
              <div className={styles.timelineTime}>{item.time}</div>
              <div className={styles.timelineContent}>
                <div>{item.content}</div>
                <div className={styles.timelineOperator}>操作人：{item.operator}</div>
              </div>
            </div>
          ),
        }))} />

        <Divider />

        <div className={styles.footer}>
          <Space>
            <Button onClick={() => navigate(-1)}>返回</Button>
            {reform.status === 'pending' && (
              <Button 
                type="primary"
                onClick={() => navigate(`/formal-acceptance/reform/result/${id}`)}
              >
                提交复查结果
              </Button>
            )}
          </Space>
        </div>
      </Card>
    </MainLayout>
  );
};

export default ReformDetail; 